import QtQuick 2.0

Rectangle{
    id:surroundButton
    color: "red"
    visible:false
    width: parent.width/4
    height: parent.height/4

    property real angle: 0
    state:"normal"
    states: [
        State {
            name: "normal"
        },
        State {
            name: "big"
            PropertyChanges {
                target: surroundButton
                width: parent.width
                height: parent.height
                visible:true
            }
        }
    ]
    Canvas {
        id: mycanvas

        Component.onCompleted: {
            parent.color = "transparent"
        }
        anchors.fill: parent

        onPaint: {
            var ctx = getContext("2d");
            ctx.strokeStyle=Qt.rgba(0.3, 0.7, 1, 1.0);
            ctx.save()
            ctx.lineWidth = 0;

            ctx.beginPath();
            var centerX = surroundButton.width/2
            var centerY = surroundButton.width/2
            var r = surroundButton.width/2
            ctx.arc(centerX,centerY,r,0+angle,-Math.PI/4+angle, true);
            ctx.arc(centerX,centerY,r/2,-Math.PI/4+angle,Math.PI*2+angle, true );
            ctx.closePath()
            ctx.stroke();

            ctx.clip()
            ctx.drawImage('source/animateButtonBackGround2.bmp', 0, 0)
            ctx.stroke()

            ctx.restore()
        }
    }
}
